<template>
  <div>
    <el-input v-if="showFilter" v-model="filterValue" :placeholder="placeholder" />
    <div v-if="selectSingle">
      <node-select-single
        v-for="(node, index) in filtedData"
        :key="index"
        :node="node"
        :data="filtedData"
        :tree-template="treeTemplate"
        class="list-node"
        @click.prevent.stop="$emit('click',node,$event);"
        @dblclick.prevent.stop="$emit('dblclick',node,$event)"
        @contextmenu.prevent.stop="$emit('contextmenu',node,$event)"
      >
        <icon-show v-if="showIcon" class="list-node-icon" :src="node" />
        <span class="list-node-text" :title="node.info?node.info.hint:node[treeTemplate.label]">{{ node[treeTemplate.label] }}</span>
      </node-select-single>
    </div>
    <div v-else>
      <node-select-multi
        v-for="(node, index) in filtedData"
        :key="index"
        :node="node"
        :data="filtedData"
        :tree-template="treeTemplate"
        class="list-node"
        @click.prevent.stop="$emit('click',node,$event);"
        @dblclick.prevent.stop="$emit('dblclick',node,$event)"
        @contextmenu.prevent.stop="$emit('contextmenu',node,$event)"
      >
        <icon-show v-if="showIcon" class="list-node-icon" :src="node" />
        <span class="list-node-text" :title="node.info?node.info.hint:node[treeTemplate.label]">{{ node[treeTemplate.label] }}</span>
      </node-select-multi>
    </div>
  </div>
</template>
<script>
export default {
  name: 'PanelList',
  components: {
    NodeSelectSingle: () => import('@components/NodeSelectSingle.vue'),
    NodeSelectMulti: () => import('@components/NodeSelectMulti.vue')
  },
  props: {
    data: { // list data set
      type: Array,
      required: true,
      default: () => []
    },
    treeTemplate: {
      type: Object,
      required: false,
      default: () => ({
        label: 'name',
        key: 'uid',
        item: 'item_uid',
        parent: 'parent_uid'
      })
    },
    showIcon: {
      type: Boolean,
      required: false,
      default: false
    },
    showFilter: { // flag of filter input display;true: default,show;false: hide
      type: Boolean,
      required: false,
      default: true
    },
    filter: { // filter condition
      type: String,
      required: false,
      default: null
    },
    placeholder: { // filter placeholder
      type: String,
      required: false,
      default: '输入关键字'
    },
    selectSingle: { // flag of tree selectSingle;false: selectMulti,true: selectSingle
      type: Boolean,
      required: false,
      default: true
    }
  },
  data() {
    return {
      filterValue: this.filter
    }
  },
  computed: {
    filtedData() {
      if (this.filterValue && this.filterValue.trim()) {
        return this.data.filter(item =>
          item.id.toLowerCase().indexOf(this.filterValue.trim().toLowerCase()) !== -1 ||
          item.name.toLowerCase().indexOf(this.filterValue.trim().toLowerCase()) !== -1
        )
      } else {
        return this.data
      }
    }
  },
  created() {
    this.$nextTick(() => {
      // console.log('filtedData', this.filtedData)
    })
  }
}
</script>
<style scoped>
.list-node {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  padding: .5rem 1rem;
  color: #606266;
}
.list-node:hover {
  background-color: #f5f7fa !important;
}
.list-node-text {
  flex-grow: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.list-node-icon {
  width: 1.5rem;
}
</style>
